<template>
  <div>
    <div class="active">
      <el-select
        v-if="!activeName"
        @change="getLabe2"
        v-model="value2"
        placeholder="请选择活动名称"
      >
        <el-option
          v-for="item in Active1_options"
          :key="item.Id"
          :label="item.Name"
          :value="item.Id"
        >
        </el-option>
      </el-select>
    </div>
    <el-button
      v-if="activeName"
      style="
        color: red;
        font-size: 30px;
        position: absolute;
        left: 17%;
        top: 10%;
      "
      type="text"
      @click="showShopList"
      >点击查看所有参与抽奖商品</el-button
    >
    <el-dialog
      v-if="activeName"
      append-to-body
      title="奖品名单"
      :visible.sync="dialogTableVisible"
    >
      <el-table :data="shopList">
        <el-table-column
          property="level"
          label="品级"
          width="150"
        ></el-table-column>
        <el-table-column
          property="commodityName"
          label="商品名"
          width="200"
        ></el-table-column>
        <el-table-column property="weight" label="权重"></el-table-column>
      </el-table>
    </el-dialog>

    <el-button
      v-if="activeName"
      type="primary"
      style="
        width: 200px;
        height: 60px;
        font-size: 20px;
        position: absolute;
        top: 30%;
        left: 22%;
      "
      @click="getCounts"
      >获取抽奖次数</el-button
    >
    <el-button
      v-if="activeName"
      type="primary"
      style="
        width: 200px;
        height: 60px;
        font-size: 20px;
        position: absolute;
        top: 50%;
        left: 22%;
        margin-left: 0px;
      "
      @click="start"
      >开始抽奖</el-button
    >
    <div class="right_content" v-if="activeName">
      <div class="show">
        <img src="@/access/qrcodetest.png" style="width:100%">
        <show3 />
      </div>
      <el-button
        style="
          width: 20%;
          height: 5%;
          font-size: 20px;
          margin-left: 1%;
          margin-top: 5%;
        "
        type="success"
        round
        size="medium"
        @click="run"
        >开始抽奖</el-button
      >
      <el-select
        @change="getLabel"
        v-model="value"
        placeholder="请选择获奖人数"
      >
        <el-option
          v-for="item in Active2_options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import show3 from "./show3.vue";
export default {
  name: "Home",
  components: { show3 },
  data() {
    return {
      gridData: [],
      dialogTableVisible: false,
      Active1_options: [],
      Active2_options: [
        {
          value: "选项1",
          label: 1,
        },
        {
          value: "选项2",
          label: 2,
        },
        {
          value: "选项3",
          label: 3,
        },
        {
          value: "选项4",
          label: 4,
        },
        {
          value: "选项5",
          label: 5,
        },
      ],
      value: "",
      value2: "",
      number: 0,
      number1: 0,
      activeId: "",
      activeName: "",
    };
  },
  mounted() {
    if (!localStorage.getItem("token")) {
      this.$router.push({
        name: "login",
      });
    }
    const Inf = {
      token: localStorage.getItem("token"),
    };
    this.$store.dispatch("getId", Inf);
    setTimeout(() => {
      for (var i = 0; i < this.ActiveId.length; i++) {
        const conbin = {
          Id: this.ActiveId[i].id,
          Name: this.ActiveId[i].activityName,
        };
        this.Active1_options.push(conbin);
      }
    }, 500);
  },
  methods: {
    showShopList() {
      setTimeout(() => {
        var Inf2 = [
          {
            name: this.activeName,
          },
          {
            token: localStorage.getItem("token"),
          },
        ];
        this.$store.dispatch("getShopList", Inf2);
      }, 500);
      this.dialogTableVisible = true;
      this.$store.dispatch("getPeople");
      setTimeout(() => {
        this.gridData = this.shopList;
      }, 1000);
    },
    getLabel(value) {
      let opt = {};
      opt = this.Active2_options.find((item) => {
        return item.value === value;
      });
      this.number1 = opt.label;
    },
    getLabe2(value) {
      let opt = {};
      opt = this.Active1_options.find((item) => {
        return item.Id === value;
      });
      this.activeId = opt.Id;
      this.activeName = opt.Name;
    },
    run() {
      const Inf = {
        count: this.number1,
        token: localStorage.getItem("token"),
      };
      console.log(Inf);
      this.$store.dispatch("getPeople2", Inf);

      setTimeout(() => {
        if (this.people2[0]) {
          var result = '';
          for(var i = 0; i < this.people2.length; i++) {
            result += this.people2[i].name + ";"+ `   `
          }
          console.log(result);
          this.$message({
            message: `恭喜你，${result}`,
            type: "success",
          });
        } else {
          this.$message({
            message: `暂无参与抽奖人`,
            type: "warning",
          });
        }
      }, 500);
    },
    getCounts() {
      const Inf = {
        token: localStorage.getItem("token"),
        activityId: Number(this.activeId),
      };
      this.$store.dispatch("getCounts", Inf);
      setTimeout(() => {
        if (this.counts == "您的抽奖次数已达到最大值") {
          this.$message({
            message: "您的抽奖次数已达到最大值",
            type: "warning",
          });
        } else {
          this.$message({
            message: `${this.counts}`,
            type: "success",
          });
        }
      }, 500);
    },
    start() {
      const Inf = {
        token: localStorage.getItem("token"),
        activeName: this.activeName,
      };
      this.$store.dispatch("getShop", Inf);
      this.$nextTick(() => {
        setTimeout(() => {
          if (this.shop) {
            this.$notify({
              title: "成功",
              message: "恭喜抽到了商品" + this.shop.commodityName,
              type: "success",
            });
          }
        }, 1000);
      });
    },
  },
  computed: {
    ...mapState({
      people2: (state) => state.one.people2,
    }),
    ...mapState({
      ActiveId: (state) => state.one.ActiveId,
    }),
    ...mapState({
      shopList: (state) => state.one.shopList,
    }),
    ...mapState({
      shop: (state) => state.one.shop,
    }),
    ...mapState({
      counts: (state) => state.one.counts,
    }),
  },
};
</script>

<style scoped>
body,
p {
  margin: 0;
}
.active .el-select {
  position: absolute !important;
  left: 43% !important;
  top: 45% !important;
}
.right_content {
  width: 800px;
  height: 800px;
  position: absolute;
  top: 26%;
  right: -190px;
  margin: auto;
}
.show {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  background: #ccc;
  width: 50%;
  height: 50%;
  margin-top: -6%;
  margin-left: 11px;
}
</style>
